<!--
 * @Author       : 梁嘉琳
 * @Date         : 2022-05-30 11:53:42
 * @LastEditors  : 梁嘉琳
 * @LastEditTime : 2022-05-30 19:59:42
 * @FilePath     : \three\index.html
-->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<script>
			function aaa(a, b) {
				const gradual = document.createElement('canvas');
				gradual.width = 400;
				gradual.height = 600;
				var ctx = gradual.getContext('2d');
				var gradient = ctx.createLinearGradient(0, 0, 0, 500);
				gradient.addColorStop(0, '#0000FF');
				gradient.addColorStop(0.25, '#00FFFF');
				gradient.addColorStop(0.5, '#00FF00');
				gradient.addColorStop(0.75, '#FFFF00');
				gradient.addColorStop(1, '#FF0000');

				ctx.fillStyle = gradient;
				ctx.fillRect(0, 10, 30, 500);
				ctx.fillStyle = '#666';
				ctx.font = '12px serif';
				const n = (b - a) / 12;
				for (let i = 0; i < 13; i++) {
					const y = i * (500 / 12) + 15;
					ctx.fillText('- ' + (b - n * i).toFixed(5), 30, i === 12 ? y - 1 : y);
				}
				document.body.appendChild(gradual);
			}
			aaa(-10, 12);
		</script>
	</body>
</html>
